<template>
  <div>
    <Layout ref="layout" :tabs="tabs" :tabDefault.sync="tabDefault" :total="total" :listQuery="listQuery" @search="getTableData">
      <template #btn>
        <el-button type="primary" round @click="handlerAdd">办理调动</el-button>
      </template>
      <template #table="{ height }">
        <SettingTable v-loading="loading" :height="height" :list="list" :tableData="tableData">
          <template #changedetail="{ row }">
            <div v-for="(item, index) in row.changedetail" :key="index">
              {{ item }}
            </div>
          </template>
          <template #oper="{ row }">
            <!-- <span v-if="tabDefault == 1" class="oper" @click="oper(row, 'confirm')">确认调动</span> -->
            <span v-if="tabDefault == 1" class="oper" @click="oper(row, 'cancel')">取消调动</span>
          </template>
        </SettingTable>
      </template>
    </Layout>
    <OperationDialog @confirm="onConfirm" title="办理调动" :isDialog.sync="isDialog" :rules="rules" :formList="formList"></OperationDialog>
    <selectUser :isSelectUser="isSelectUser" @setUserId="setUserId" @close="isSelectUser = false" :enter-type="1"></selectUser>
  </div>
</template>

<script>
import { BLDD, BLDD_Rules } from "./config.js";
import Layout from "../layout/index.vue";
import SettingTable from "../layout/SettingTable.vue";
import OperationDialog from "./OperationDialog.vue";
import selectUser from "./components/selectUser.vue";

export default {
  name: "redeploy",
  components: { Layout, SettingTable, OperationDialog, selectUser },
  data() {
    return {
      tableData: [],
      list: [],
      tabs: [
        { label: "待调动", name: "1" },
        { label: "已调动", name: "2" },
      ],

      tabDefault: "1",
      total: 0,
      listQuery: {
        PageSize: 50,
        PageIndex: 1,
      },

      loading: false,
      isDialog: false,
      formList: BLDD,
      rules: BLDD_Rules,
      isSelectUser: false,
    };
  },
  watch: {
    tabDefault: {
      handler() {
        this.tableData = [];
        this.total = 0;
        this.listQuery = { PageSize: 50, PageIndex: 1 };
      },
    },
  },
  methods: {
    setUserId(id) {
      console.log(id, "userId");
      this.$router.push({ name: "transferAdd", query: { userId: id } });
    },
    handlerAdd() {
      // this.$router.push({ name: "positiveAdd" });
      this.isSelectUser = true;
    },
    async onConfirm(form) {
      await this.$api.optionsManage.InsertEmployeeTransfer(form);
      this.$refs.layout.onSearch();
      this.isDialog = false;
    },
    async getTableData(e) {
      this.loading = true;
      const params = { pageIndex: this.listQuery.PageIndex, pageSize: this.listQuery.PageSize, departments: [], employeeStatus: "", nameOrJobOrPhone: "" };
      const { data } = await this.$api.optionsManage.GetTransferPage(e || params, this.tabDefault || "1");
      this.tableData = data.data.data;
      this.total = data.data.total;
      this.list = data.data.columns.sort((a, b) => a.index - b.index).map((i) => ({ prop: i.columnCode, label: i.columnname, [i.isFixed ? "fixed" : ""]: "left" }));
      // this.list.push({ prop: "", label: "操作", fixed: "right", minWidth: 70 });
      this.tabDefault == 1 && this.list.push({ prop: "", label: "操作", fixed: "right", minWidth: 70 });
      this.loading = false;
    },
    async oper({ EmployeeTransferId }, type) {
      await this.$confirm(`确定取消该员工的调动申请吗？取消调动后，将自动撤销审批流程，且员工信息恢复原样。`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
      if (type === "confirm") {
        await this.$api.optionsManage.ConfirmTransfer({ EmployeeTransferId });
      } else if (type === "cancel") {
        await this.$api.optionsManage.UnConfirmTransfer({ EmployeeTransferId });
      }
      this.$refs.layout.onSearch();
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped></style>
